<template>
    <div class="container">
        <el-row>
            <el-col :span="18">
                <h3 class="el-icon-plus" style="margin-bottom: 2rem"> 发布</h3>
                <el-divider></el-divider>
                <div class="one-line">
                    <span>
                        标题（简单扼要）:
                    </span>
                    <el-input placeholder="请输入标题..." v-model="params.title"></el-input>
                </div>
                <Editor v-model="params.content" @changeHtml="changeHtml"/>
                <TagSelector class="one-line" v-model="params.tags"/>
                <div class="publish-btn">
                    <el-button type="success" @click="publish()">发布</el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="right-container">
                    <p>
                        发起指南
                    </p>
                    <ol>
                        <li>标题: 请用精简的语言描述您发布的问题，不超过50字</li>
                        <li>正文: 详细补充您的问题内容，并确保问题描述清晰直观, 并提供一些相关的资料</li>
                        <li>标签: 选择一个或者多个合适的标签，用逗号隔开，每个标签不超过50个字</li>
                    </ol>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Editor from "../components/Editor/Editor";
    import TagSelector from "../components/Publish/TagSelector";

    export default {
        name: "Publish",
        data() {
            return {
                params: {
                    tags: [],
                    title: null,
                    content: "",
                    contentHtml: "",
                }
            }
        },
        methods: {
            /**
             * 发布文章
             */
            async publish(){
                this.$confirm('确定要发布文章吗？', '发布', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(async () =>{
                    if(!this.validArticle()){
                        return;
                    }
                    let params = {
                        ...this.params,
                    };
                    params.tags = params.tags.toString();
                    if(await this.$store.dispatch("article/saveArticle", this.$qs.stringify(params))){
                        this.$router.push({name: "Home"});
                    }
                }).catch(() => {

                })
            },
            /**
             * 验证文章参数
             */
            validArticle(){
                if(this.params.title == "" || !this.params.title){
                    this.$message.error("请输入文章标题");
                    return false;
                }
                if(this.params.content == "" || !this.params.content){
                    this.$message.error("请输入文章正文");
                    return false;
                }
                return true;
            },
            /**
             * 修改文章Html参数
             * @param html
             */
            changeHtml(html) {
                this.params.contentHtml = html;
            }
        },
        components: {TagSelector, Editor},
    }
</script>

<style scoped>
    .container {
        background-color: #ffffff;
        padding: 3rem;
    }

    .one-line {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .one-line span {
        font-size: 2rem;
        margin-bottom: 1rem;
        display: inline-block;
    }

    .right-container {
        margin-left: 3rem;
    }

    .right-container p {
        font-size: 3rem;
        margin-bottom: 2rem;
    }

    .right-container ol {
        list-style: circle;
        margin-left: 2rem;
        font-size: 2rem;
        line-height: 3rem;
    }

    .publish-btn {
        text-align: right;
    }
</style>